<template>
  <view class="shop-check">
    <up-popup :show="show" :closeable="true" @close="onClose">
      <view class="px-20">
        <view class="flex justify-start mt-100">
          <!-- <image class="shop-img mr-28" :src="specifList[current].sizelist.skuPic" /> -->
          <view class="flex column">
            <view class="price f-40-B">￥{{ specifList[current].price }}</view>
            <!-- <view class="mt-16 f-28">颜色{{ specifList[current].sizelist.inventory }} 尺码</view> -->
          </view>
        </view>
        <view class="mt-32 f-32">颜色</view>
        <view class="flex flex-wrap">
          <view class="specif-item mt-16 mr-16 tc f-28" :class="{ 'active': item.checked, 'disabled': item.count == 0 }"
            v-for="(item, index) in specifList" :key="index" @click="onCheckSpecif(item, index)">
            {{ item.name }}
          </view>
        </view>
        <view class="mt-32 f-32">尺码</view>
        <!-- 横向滚动的筛选 -->
        <!-- <view v-if="specifList[current].newattributeList.length>3">
          <up-scroll-list>
              <view class="table">
                  <view class="table-header header-cell">
                      <view class="cell color-cell">尺码</view>
                      <view v-for="size in sizes" :key="size" class="cell1">
                          <u-text :text="size" size="14" color="#666666"></u-text>
                      </view>
                  </view>
                  <view v-for="(row, index) in specifList[current].attributeList" :key="index" class="table-row">
                      <view class="cell color-cell">
                          <u-text :text="row.name" size="14" center="center" color="#666666"></u-text>
                      </view>
                      <view v-for="(quantity, sizeIndex) in row.quantities" :key="sizeIndex" class="cell"
                          :class="{ 'unavailable': quantity === '/' }">
                          <u-text :text="quantity" size="14"
                              :color="quantity === '/' ? '#999999' : '#333333'"></u-text>
                      </view>
                  </view>
              </view>
          </up-scroll-list>
          <view class="flex justify-between items-center mt-64">
            <view class="f-32">数量</view>
            <view>
              <view class="flex mb-12">
                <text class="input cart-reduce" @click="onMinus()">-</text>
                <text class="input cart-text">{{ quantitynum }}</text>
                <text class="input cart-add" @click="onAdd()">+</text>
              </view>
            </view>
          </view>
        </view> -->
        <!-- 有尺码 -->
         <!-- v-else -->
        <view class="flex justify-between flex-wrap items-center mt-64" >
          <view class="size-item" v-for="(item,index) in specifList[current].sizelist" :key="index">
            <view class="f-32">
              <view>{{ item.size }}</view>
              <view class="f-24 colorgray" :class="{ 'stock': item.stock == 0 }">{{item.status}}</view>
            </view>
            <view>
              <view class="flex mb-12">
                <text class="input cart-reduce" @click="onMinus1(item,index)">-</text>
                <text class="input cart-text">{{ item.num }}</text>
                <text class="input cart-add" @click="onAdd1(item,index)">+</text>
              </view>
            </view>
          </view>
        </view>
        <view class="confirm-btn my-32 tc f-28-B"
          :class="{ 'pay-active': props.specType == 2, 'pay-disabled': specifList[current].stock == 0 }"
          @click="props.specType == 1 ? onCart() : onPay()">
          {{ props.specType == 1 ? "确定" : "立即购买" }}
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
const emit = defineEmits(["close", "cart", "pay"]);
const props = defineProps({
  showType:{
    type: Number,
    default: 1
  },
  specifList: [],
  specType: {
    type: Number,
    default: 1
  }
});
let quantitynum=ref(1)
const current = ref(0);
const show = ref(true);
const sizes = ref(['70', '75', '80', '85', '90']);
const onMinus = ()=>{
  quantitynum.value--
  getSumTotal()
}
const onAdd = ()=>{
  quantitynum.value++
  getSumTotal()
}

const onMinus1 = (item,index)=>{
  if(props.specifList[current.value].sizelist[index].num > 0){
    props.specifList[current.value].sizelist[index].num--
  } else {
    uni.showToast({
      title: "数量不能小于0",
      icon: "none"
    })
  }
  getSumTotal()
}

const onAdd1 = (item,index)=>{
  if(props.specifList[current.value].sizelist[index].num < item.inventory) {
    props.specifList[current.value].sizelist[index].num++
  } else {
    uni.showToast({
      title: "已达到最大库存",
      icon: "none"
    })
  }
  getSumTotal()
}

// 合计
const getSumTotal = () => {
  let sum = 0;
  // for (let i = 0; i < cartList.value.length; i++) {
  // if (cartList.value[i].selected) {
  //   sum += cartList.value[i].quantity * cartList.value[i].price;
  // }
  // }
  
  // sum = quantity.value*specifList[current].price
  // totalPrice.value = sum;
};
const onCheckSpecif = (item, index) => {
  if (item.stock == 0) return;
  current.value = index;
  props.specifList.forEach((item) => {
    item.checked = false;
  });
  item.checked = true;
};

const onClose = () => {
  emit("close");
};

const isValidSelection = () => {
  const currentItem = props.specifList[current.value];
  
  // Check if any size has been selected (num > 0)
  const hasSizeSelected = currentItem.sizelist.some(item => item.num > 0);
  
  // Check if color is selected (current item is checked)
  const hasColorSelected = currentItem.checked;

  return hasColorSelected && hasSizeSelected;
};

// 加入购物车
const onCart = () => {
  if (props.specifList[current.value].stock == 0) {
    uni.showToast({
      title: "该商品库存不足，无法加入购物车",
      icon: "none",
      mask: true
    });
    return;
  }

  if (!isValidSelection()) {
    uni.showToast({
      title: "请选择颜色和尺码",
      icon: "none",
      mask: true
    });
    return;
  }
  
  emit("cart", props.specifList);
};

// 立即购买
const onPay = () => {
  if (props.specifList[current.value].stock == 0) {
    uni.showToast({
      title: "该商品库存不足，无法购买",
      icon: "none",
      mask: true
    });
    return;
  }
  if (!isValidSelection()) {
    uni.showToast({
      title: "请选择颜色和尺码",
      icon: "none",
      mask: true
    });
    return;
  }
  emit("pay", props.specifList[current.value]);
};
</script>

<style lang="scss" scoped>
.shop-check{


  .shop-img{
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
  }
    
  .price{
    color: #F53F3F;
  }
    
  .specif-item{
    width: 218rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: #F5F5F5;
    border-radius: 32rpx;
  }
    
  .specif-item:nth-child(3n){
    margin-right: 0;
  }
    
  .active{
    background: rgba(214, 142, 68, 1);
    color: #ffffff;
  }
    
  .disabled{
    background: #F5F5F5;
    color: #909193;
  }
    
  .input{
    display: block;
    width: 44rpx;
    height: 44rpx;
    line-height: 44rpx;
    text-align: center;
    float: left;
  }
    
  .cart-add{
    border-left: none;
    border: 2rpx solid #ededed;
    border-radius: 0rpx 8rpx 8rpx 0rpx;
    font-size: 36rpx;
    color: #CCCCCC
  }
    
  .cart-reduce{
    border-right: none;
    border: 2rpx solid #ededed;
    border-radius: 8rpx 0rpx 0rpx 8rpx;
    font-size: 36rpx;
    color: #CCCCCC
  }
    
  .cart-text{
    width: 44rpx;
    border-top: 2rpx solid #ededed;
    border-bottom: 2rpx solid #ededed;
    font-size: 28rpx;
  }
   
  .cart-tip{
    color: #606266;
  }
    
  .confirm-btn{
    width: 100%;
    height: 72rpx;
    line-height: 72rpx;
    background: rgba(214, 142, 68, 1);
    color: #ffffff;
    border-radius: 104rpx;
  }
    
  .pay-active{
    background: rgba(214, 142, 68, 1);
    color: #ffffff;
  }
    
  .pay-disabled{
    background: #909193;
    color: #ffffff;
  }
    
  :deep(.u-icon__icon){
    color: #000000 !important;
    font-size: 30rpx !important;
  }
  .size-item{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12rpx;
    .colorgray{
      color: #909193;
    }
  }
}  
</style>
